*{
    margin: 0;
    padding: 0;
}
.qf-nav-bar{
    width: 100%;
    height: 100px;
    border: 5px dashed pink;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 40px;
    box-sizing: border-box;
}
.qfbutton{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:1.2;text-align:center;border-radius:2px;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.qfbutton::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.qfbutton:active::before{opacity:.1}.qfbutton--disabled::before,.qfbutton--qfloading1::before{display:none}.qfbutton--default{color:#323233;background-color:#fff;border:1px solid #ebedf0}.qfbutton--primary{color:#fff;background-color:#07c160;border:1px solid #07c160}.qfbutton--info{color:#fff;background-color:#1989fa;border:1px solid #1989fa}.qfbutton--danger{color:#fff;background-color:#ee0a24;border:1px solid #ee0a24}.qfbutton--warning{color:#fff;background-color:#ff976a;border:1px solid #ff976a}.qfbutton--plain{background-color:#fff}.qfbutton--plain.qfbutton--primary{color:#07c160}.qfbutton--plain.qfbutton--info{color:#1989fa}.qfbutton--plain.qfbutton--danger{color:#ee0a24}.qfbutton--plain.qfbutton--warning{color:#ff976a}.qfbutton--large{width:100%;height:50px}.qfbutton--normal{padding:0 15px;font-size:14px}.qfbutton--small{height:32px;padding:0 8px;font-size:12px}.qfbutton__qfloading1{color:inherit;font-size:inherit}.qfbutton--mini{height:24px;padding:0 4px;font-size:10px}.qfbutton--mini+.qfbutton--mini{margin-left:4px}.qfbutton--block{display:block;width:100%}.qfbutton--disabled{cursor:not-allowed;opacity:.5}.qfbutton--qfloading1{cursor:default}.qfbutton--round{border-radius:999px}.qfbutton--square{border-radius:0}.qfbutton__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.qfbutton__content::before{content:' '}.qfbutton__icon{font-size:1.2em;line-height:inherit}.qfbutton__icon+.qfbutton__text,.qfbutton__qfloading1+.qfbutton__text,.qfbutton__text+.qfbutton__icon,.qfbutton__text+.qfbutton__qfloading1{margin-left:4px}.qfbutton--hairline{border-width:0}.qfbutton--hairline::after{border-color:inherit;border-radius:4px}.qfbutton--hairline.qfbutton--round::after{border-radius:999px}.qfbutton--hairline.qfbutton--square::after{border-radius:0}

.qfloading1{
    width: 80px;
    height: 40px;
    margin: 0 auto;
    margin-top:100px;
}
.qfloading1 span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }
}
.qfloading1 span:nth-child(2){
    -webkit-animation-delay:0.2s;
}
.qfloading1 span:nth-child(3){
    -webkit-animation-delay:0.4s;
}
.qfloading1 span:nth-child(4){
    -webkit-animation-delay:0.6s;
}
.qfloading1 span:nth-child(5){
    -webkit-animation-delay:0.8s;
}
.qfloading2{
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #000;
    color: white;
    font-size: 30px;
    opacity: .5;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qfdialog{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.3);
    justify-content: center;
    align-items: center;
    position: fixed; 
    top: 0;
    left: 0;

}
.qfdialog .box{
    width: 500px;
    height: 300px;
    background-color: #fff;

}
.qfdialog .box .header{
    height: 50px;
    background-color: green;
    border-bottom:2px solid black ;
}
.qfdialog .box .main{
    height: 200px;
    border-bottom:2px solid black ;
}
.qfdialog .box .footer{
    height: 50px;
    border-bottom:2px solid black ;
    background-color: white;
    text-align: right;
}
.qf-page span{   
    width:50px;
    height:50px;
    display: inline-block;
    background-color: #000;
    color: white;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    line-height: 50px;
}
.qf-page span:hover{
    color: black;
    background-color: pink;
}